
<script type="text/javascript">
    function disableElementChildren(c, dis = true) {
        dis ? $(c).hide() : $(c).show();
    }
</script>
<div id="container-rubric" class="content" style="display:none;">
    <div id="ajax_debug" style="display: none;"></div>
    <div id="ajax_raw" style="display: none;"></div>
    <form id="gradeable-form" class="form-signin" action="{{ submit_url }}"
        method="post" enctype="multipart/form-data" onsubmit="return checkForm();"> 

        <div class="modal-header" style="overflow: auto;">
            <div>
                <h1 id="myModalLabel">{{ action == 'edit' ? 'Edit Gradeable' : 'New Gradeable' }}<span id="modal_label_title"></span></h1>
			</div>
            <div>
                <b>                    
                    <a target=_blank href="http://submitty.org/instructor/create_edit_gradeable">Need help with creating/editing a gradeable? <i style="font-style:normal;" class="fa-question-circle"></i></a>
                </b>
                <div style="float: right" id="save_status"></div>
            </div>
        </div>
        <br/>
        <div class="tab-bar-wrapper">
            <a class="nav-bar" id="page_0_nav" href="javascript:onChangeNavTab(0);">General</a>
            <a class="nav-bar" id="page_1_nav" href="javascript:onChangeNavTab(1);">Submissions/Autograding</a>
            <a class="nav-bar" id="page_2_nav" href="javascript:onChangeNavTab(2);">Rubric</a>
            <a class="nav-bar" id="page_3_nav" href="javascript:onChangeNavTab(3);">Grader Assignment</a>
            <a class="nav-bar" id="page_4_nav" href="javascript:onChangeNavTab(4);">Dates</a>
        </div>
        <br/>
        <br/>
        <div class="modal-body">
            <div class="page-content" id="page_0_content">{{ include('admin/admin_gradeable/AdminGradeableCreate.twig')   }}</div>

            {# only load the other pages if we are editing an existing gradeable #}
            {% if action == 'edit' %}
                <div class="page-content" id="page_1_content">{{ include('admin/admin_gradeable/AdminGradeableAuto.twig')     }}</div>
                <div class="page-content" id="page_2_content">{{ include('admin/admin_gradeable/AdminGradeableRubric.twig')   }}</div>
                <div class="page-content" id="page_3_content">{{ include('admin/admin_gradeable/AdminGradeableGraders.twig')  }}</div>
                <div class="page-content" id="page_4_content">{{ include('admin/admin_gradeable/AdminGradeableDates.twig')    }}</div>
            {% endif %}
        </div>
        <br/>
        <div id="nav-controls">
            <!--<button class="btn btn-primary" id="next_button" onClick="onChangeNavTab(adminGradeableNavTab+1);" style="margin-right:10px; float: right;">Next</button>
            <button class="btn btn-primary" id="prev_button" onClick="onChangeNavTab(adminGradeableNavTab-1);" style="margin-right:10px; float: right;">Previous</button>-->
            <!--<button class="btn btn-primary" type="submit" style="margin-right:10px; float: right;">Discard Changes</button>-->
        </div>
    </form>
</div>
<script type="text/javascript">

    let adminGradeableNavTab = 0;
    let navItemsStatus = new Map([['0',true],['1',true],['2',true],['3',true],['4',true]]);
    function onChangeNavTab(tab) {

        if (tab > 4 || tab < 0) {
            alert('Invalid Navigation');
            return;
        }

        {% if action == 'edit' %}
            // change the url so if the user refreshes the page, they stay on the same tab
            window.history.replaceState("", "", buildCourseUrl(['gradeable', $('#g_id').val(), 'update']) + `?nav_tab=${tab}`);
        {% endif %}

        adminGradeableNavTab = tab;

        $('.nav-bar').each(function () {
            if (navItemsStatus.get(this.id.split('_')[1]) === false) {
                $(this).hide();
            }
            else {
                $(this).show();
                $(this).addClass("{{ action != 'edit' ? "disabled-btn" : "normal-btn" }}")
            }
        });

        $('.page-content').hide();
        $('#page_' + tab + '_content').show();
        for (var i =0 ; i<5 ;i++)
        {
            $('#page_' + i + '_nav').removeClass('active-btn');
        }
        $('#page_' + tab + '_nav').addClass('active-btn');
    }

    function updateNavItemsStatus() {
        if($('#radio_electronic_file').is(':checked')) {
            let yesChecked = $('#yes_ta_grade').is(':checked');
            navItemsStatus.set('1', true);
            navItemsStatus.set('2', yesChecked);
            navItemsStatus.set('3', yesChecked);
        }
        else {
            navItemsStatus.set('1', false);
            navItemsStatus.set('2', true);
            navItemsStatus.set('3', true);
        }
        onChangeNavTab(adminGradeableNavTab);
    }

    function onTitleChange() {
        let title = $('#g_title').val();
        let my_id = $('#g_id').val();
        if (title !== '') {
            title = ': [' + my_id + '] ' + title;
        }
        $('#modal_label_title').html(title);
    }

    $(document).ready(function() {

        updateNavItemsStatus();
        $('[name="type"]').change(updateNavItemsStatus);
        $('[name="scanned_exam"]').change(updateNavItemsStatus);
        $('[name="ta_grading"]').change(updateNavItemsStatus);

        // Update navigation on load

        {# Disable navigation on 'new' mode #}
        {% if action == 'edit' %}
            adminGradeableNavTab = {{ nav_tab == -1 ? (gradeable.getType() == 0 ? 1 : 2) : nav_tab }};
        {% else %}
            adminGradeableNavTab = 0;
        {% endif %}

        updateNavItemsStatus();

        // update the title bar when the gradeable name changes
        onTitleChange();
        $('#g_title').change(onTitleChange);
        $('#g_id').change(onTitleChange);


        // TODO: below is selectively copied from previous ui.  It updates various
        //      UI element values when other elements change.  This keeps the form
        //      state valid/submittible since there is no server-side checking as
        //      of now (summer 2018)

        // Clamp all numeric input to be between their min and max attributes
        $( "input" ).change(function() {
            let max = parseFloat($(this).attr('max'));
            let skip1 = isNaN(max);
            let min = parseFloat($(this).attr('min'));
            let skip2 = isNaN(min);
            if (!skip1 && $(this).val() > max)
            {
                $(this).val(max);
            }
            else if (!skip2 && $(this).val() < min)
            {
                $(this).val(min);
            }
        });

        // TODO: move this to appropriate file when peer grading
        //      is supported
        // $('input:radio[name="eg_peer_grading"]').change(function() {
        //     $('.peer_input').hide();
        //     $('#peer_averaging_scheme').hide();
        //     if ($(this).is(':checked')) {
        //         if($(this).val() == 'true') {
        //             $('.peer_input').show();
        //             $('#peer_averaging_scheme').show();
        //             if($('#team_yes_radio').is(':checked')) {
        //                 $('#team_yes_radio').prop('checked', false);
        //                 $('#team_no_radio').prop('checked', true);
        //                 $('input:radio[name="eg_team_assignment"]').trigger("change");
        //             }
        //         }
        //     }
        // });

        // End copied section

        // Don't show page until all settings loaded
        $("#container-rubric").show();
    });

</script>
